<script lang="ts">
import { defineComponent, watchEffect, onBeforeUpdate, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import RoomDetail from './components/detail.vue';
import { IRoomDetailParams } from '@/api/interface';
import { useStore } from '@/store';
import { useRoute } from 'vue-router';
export default defineComponent({
  components: {
    RoomDetail,
  },
  setup() {
    const { t } = useI18n();
    const store = useStore();
    const route = useRoute();
    // watch(
    //   () => route.params,
    //   (newVal, oldVal) => {
    //     store.dispatch('getRoomDetail', newVal);
    //   }
    // );
    onBeforeUpdate(() => {
      // DOM更新前调用接口，asyncData并不起作用，这里也可以使用onUpdated钩子
      watchEffect(() => store.dispatch('getRoomDetail', route.params));
      store.commit('setOrderVisible', false); // 若点击popover跳转至详情页面则关闭popover
    });
    return { t };
  },
  asyncData({ store, route }: any) {
    console.log('asyncData---', store, route);
    const { roomId } = store.state;
    const { id } = route.value.params;
    //const { pageNo } = store.state;
    return store.dispatch('getRoomDetail', {
      id: roomId || id,
    } as IRoomDetailParams);
  },
});
</script>

<template>
  <RoomDetail />
</template>

<style lang="scss">
@import '@/assets/scss/detail/index.scss';
</style>
